<script setup lang="ts">
import { reactive, ref } from 'vue';
import { message } from 'ant-design-vue';

import { signIn } from '@/apis/user';
import { encrypt } from '@/utils/encrypt';
import { setToken } from '@/utils/auth';
import { useRouter } from 'vue-router';
import Footer from '@/layout/components/Footer.vue';
const router = useRouter();

interface SignInModel {
    userName: string;
    userPwd: string;
    userPhone: string;
}

const signInModel = reactive<SignInModel>({
    userName: '',
    userPwd: '',
    userPhone: '',
});

const isLoading = ref(false);

async function handleFormFinish(value: any) {
    try {
        isLoading.value = true;
        const { status, msg, data } = await signIn({
            data: value,
        });
        console.log('登录返回的数据',data); // 打印后端返回的所有数据  获取用户的手机号

              localStorage.setItem('userData', JSON.stringify(data));// 将data存储到localStorage中
              const storedUserData = localStorage.getItem('userData');
if (storedUserData) {
    const userData = JSON.parse(storedUserData);
    console.log('存储的userData信息:', userData);
} else {
    console.log('未找到存储的userData信息');
}
                  
        if (status !== 100) {
            throw new Error(msg);
        }
        const token = encrypt(data.userID);
        if (token) {
            setToken(token);
            router.push({ path: '/', replace: true });
        }
    } catch (err) {
        message.error((err as Error).message);
    } finally {
        isLoading.value = false;
    }
}

function handleFormFinishFailed(errorInfo: any) {
    console.log('Failed:', errorInfo);
}
</script>

<template>
    <main class="flex h-full bg-blue-50">
        <section
            class="flex-shrink-0 w-1/4 bg-[url('assets/images/illustrations/illustrations_sign-in.png')] bg-no-repeat bg-cover"
        ></section>
        <section class="flex items-center justify-center flex-1">
            <a-card
                :bordered="false"
                :bodyStyle="{
                    position: 'relative',
                    padding: '4rem',
                    overflow: 'hidden',
                }"
            >
                <div class="flex flex-col pb-12 gap-y-4">
                    <h4 class="p-0 m-0 text-4xl font-semibold">
                        Hi, 欢迎登录系统 (Welcome aboard)
                    </h4>
                    <!-- <span class="text-sm">
                        还没有账号?
                        <RouterLink
                            class="font-semibold link link-hover link-primary"
                            to="/auth/sign-up"
                            >注册账号</RouterLink
                        >
                    </span> -->
                </div>
                <a-form
                    class="flex flex-col min-w-96"
                    name="basic"
                    autocomplete="off"
                    layout="vertical"
                    hideRequiredMark
                    :model="signInModel"
                    @finish="handleFormFinish"
                    @finishFailed="handleFormFinishFailed"
                >
                    <div class="flex flex-col gap-y-4">
                        <a-form-item
                            class="m-0"
                            label="账号 (Account number)"
                            name="userName"
                            :rules="[
                                { required: true, message: '账号不能为空!' },
                            ]"
                        >
                            <a-input
                                class="min-h-11"
                                v-model:value="signInModel.userName"
                                placeholder="请输入 (please enter)"
                            />
                        </a-form-item>
                        <a-form-item
                            class="m-0"
                            label="密码 (Password)"
                            name="userPwd"
                            :rules="[
                                { required: true, message: '密码不能为空!' },
                            ]"
                        >
                            <a-input-password
                                class="min-h-11"
                                v-model:value="signInModel.userPwd"
                                placeholder="请输入 (please enter)"
                            />
                        </a-form-item>
                        <a-form-item
                            class="m-0"
                            label="关联手机号 (Associated with a cell phone number)"
                            name="userPhone"
                            :rules="[
                                { required: true, message: '手机号不能为空!' },
                            ]"
                        >
                            <a-input
                                class="min-h-11"
                                v-model:value="signInModel.userPhone"
                                placeholder="请输入 (please enter)"
                            />
                        </a-form-item>
                    </div>
                    <div class="flex flex-col mt-2 text-xs">
                        <span
                            >登录视为您已阅并同意
                            <RouterLink
                                class="link link-hover link-primary"
                                to="/sign-in"
                                >平台服务条款</RouterLink
                            >
                            和
                            <RouterLink
                                class="link link-hover link-primary"
                                to="/sign-in"
                                >隐私政策</RouterLink
                            >
                        </span>
                        <span
                            >Log in as you have read and agreed
                            <RouterLink
                                class="link link-hover link-primary"
                                to="/sign-in"
                                >Platform terms of service</RouterLink
                            >
                            and
                            <RouterLink
                                class="link link-hover link-primary"
                                to="/sign-in"
                                >privacy policy</RouterLink
                            >
                        </span>
                    </div>
                    <a-form-item class="m-0 mt-12">
                        <a-button
                            class="w-full h-12"
                            type="primary"
                            html-type="submit"
                            :loading="isLoading"
                            >登录 (Sign In)</a-button
                        >
                    </a-form-item>
                    <RouterLink
                        class="mt-2 text-sm link link-neutral text-end"
                        to="/sign-in"
                        >忘记密码 (Forgot password)?</RouterLink
                    >
                </a-form>
            </a-card>
        </section>
        <footer class="flex items-center justify-center py-4">
            <Footer />
        </footer>
    </main>
</template>

<style lang="scss" scoped>
.card {
    width: 480px;
}
footer {
    position: sticky;
    bottom: 0;
    justify-content: center;
}
</style>
